import 'package:flutter/material.dart';

/// 幽灵导航（左右滑动）
/// [hasLine]：是否有下划线（Widget最下方下划线）
/// [data]：标签数据
/// [onChanged]：标签状态改变回调
class HorizontalListWidget extends StatefulWidget {
  final bool hasLine;
  final List data;
  final Function onChanged;

  HorizontalListWidget(this.data, {this.hasLine = true, this.onChanged});

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HorizontalListWidgetState();
  }
}

class HorizontalListWidgetState extends State<HorizontalListWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
//      height: 45,
      color: Colors.white,
      child: Column(
        children: <Widget>[
          Container(
              height: 44,
              padding: EdgeInsets.only(top: 6, bottom: 6, left: 16),
              child: ListView(
                //设置水平方向排列
                scrollDirection: Axis.horizontal,
                //添加子元素
                children: _getWidgetList(widget.data),
              )),
          Visibility(
              visible: widget.hasLine,
              child: Divider(height: 0.5, color: Color(0xFFEBEBEB))),
        ],
      ),
    );
  }

  List<Widget> _getWidgetList(List data) {
    List<Widget> widgetList = List();
    if (data != null) {
      data.forEach((item) {
        widgetList.add(GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            setState(() {
              if (item.selected) {
                item.selected = false;
              } else {
                item.selected = true;
              }
              if (widget.onChanged != null) {
                widget.onChanged(data);
              }
            });
          },
          child: Container(
//            constraints: BoxConstraints(
//              minWidth: 77,
//            ),
            height: 32,
            margin: EdgeInsets.only(right: 10),
            child: Text(
              item.content,
              style: TextStyle(color: Color(0xFF666666), fontSize: 13),
              textAlign: TextAlign.center,
            ),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(16),
                ),
                color: item.selected ? Color(0xFFDFF9F9) : Colors.transparent,
                border: item.selected
                    ? null
                    : Border.all(color: Color(0xFFE4E8EB), width: 1)),
            padding: EdgeInsets.only(
                left: 10, right: 10, top: item.selected ? 7 : 6),
          ),
        ));
      });
    }
    return widgetList;
  }
}
